<!--该组件为承保档案卡片饼状图组件-->

<template>
  <!--饼状图组件容器-->
  <div class="pizza-chart-container">
    <!--饼状图title容器-->
    <div class="pizza-title">
      <!--左横线-->
      <img src="@/assets/images/business/underwritemap/left-line.png">
      <!--动态title 继承字体颜色渐变公共样式-->
      <span class="text-color-gradient">承保档案数据</span>
      <!--右横线-->
      <img src="@/assets/images/business/underwritemap/right-line.png">
    </div>
    <!--饼状图body容器 此处用于通过父组件传的参数不同而选取不同的样式-->
    <div :class= 'pizzaBack=="house"?["pizza-body","pizza-body-home"]:["pizza-body","pizza-body-bottle"]' >
      <!--饼状图数据容器-->
      <div class="pizza-data-public pizza-data-left-top">
        <h6 >承保亩数</h6>
        <h5 class="text-color-gradient">5203</h5>
      </div>
      <div class="pizza-data-public pizza-data-right-top">
        <h6 >承保亩数</h6>
        <h5 class="text-color-gradient">5203</h5>
      </div>
      <div class="pizza-data-public pizza-data-left-bottom">
        <h6 >承保亩数</h6>
        <h5 class="text-color-gradient">5203</h5>
      </div>
      <div class="pizza-data-public pizza-data-right-bottom">
        <h6 >承保亩数</h6>
        <h5 class="text-color-gradient">5203</h5>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  //接收父组件传参
  props: {
    //用于区分饼状图背景的不同
    pizzaBack:{
      type:String,
      default:'house'
    }
  }
}
</script>

<style lang="scss" scoped>
  //设置饼状图组件容器样式
  .pizza-chart-container{
    width: 100%;
    height: 50%;
    //设置饼状图title容器样式
    .pizza-title{
      width:100%;
      height:20%;
      //设置内容物位置
      display:flex;
      justify-content: space-between;
      align-items: center;
      //设置横线样式
      img{
        width: 35%;
      }
      //设置文本样式
      span{
        font-size: 10px;
      }
    }
    //设置饼状图body容器样式
    .pizza-body{
      //设置宽高
      width:100%;
      height:80%;
      //设置背景

      background-size: 100% 100%;
      background-size:cover;   //超出部分裁去
      background-position:center;   //以图片中心设置背景
      position: relative;  //设为相对定位 以供子元素绝对定位
      //设置饼状图数据容器公共样式
      .pizza-data-public{
        //设置宽高
        width: 23%;
        height: 35%;
        //background: lightseagreen;  //仅用于布局查看
        position:absolute;  //设为绝对定位
        //设置内容位置
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        h6{
          //设置宽高
          width: 50px;
          height: 18px;
          margin:0;
          //设置字体样式
          color:rgba(131, 158, 203, 1);
        }
        h5{
          //设置宽高
          width: 50px;
          height: 20px;
          margin:0;
          //设置字体样式
          font-weight: bold;
        }

      }
      //设置饼状图左上角数据容器样式
      .pizza-data-left-top{
        top:15px;
        left:0;
      }
      //设置饼状图右上角数据容器样式
      .pizza-data-right-top{
        top:15px;
        right:0;
      }
      //设置饼状图左下角数据容器样式
      .pizza-data-left-bottom{
        bottom:15px;
        left:0;
      }
      //设置饼状图右下角数据容器样式
      .pizza-data-right-bottom{
        bottom:15px;
        right:0;
      }
    }
    //设置设置饼状图body容器背景专用
    .pizza-body-home{
      background-image: url('../../../../assets/images/business/underwritemap/pizza-body-back-home.png');
    }
    .pizza-body-bottle{
      background-image: url('../../../../assets/images/business/underwritemap/pizza-body-back-bottle.png');
    }
  }
</style>
